<ion-view view-title="广场" style="background-color: #383644">
  <ion-content>

    <div id="search-bar">
      <div class="item-dark item-input-inset">
        <label class="item-input-wrapper" id="search-input">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="text" placeholder="搜索..." ng-model="query.value" ng-change="search()" ng-focus="back()">
        </label>
        <a ng-show="searching()" ng-click="clear()" style="margin-left: 10px; color: white">取消</a>
      </div>
    </div>

    <style>

      .popular-user-list {
        width: 90%; border-radius: 50%; border: 2px solid white;
      }

      .tab_col_active {
        background-color: #FFAF17;
      }

    </style>

    <div ng-show="searched">
      <div class="row"
           style="text-align: center; padding-left: 10%; padding-right: 10%;
          background-color: #8B5F0C; color: white; padding-top: 0; padding-bottom: 0;">
        <div class="col" ng-click="select_tab(1)" ng-class="{tab_col_active:selected(1)}">综合</div>
        <div class="col" ng-click="select_tab(2)" ng-class="{tab_col_active:selected(2)}">用户</div>
        <div class="col" ng-click="select_tab(3)" ng-class="{tab_col_active:selected(3)}">旅程</div>
      </div>
      <div>
        <ion-list ng-show="selected(1)">
          <div class="item-dark card route-list" style="border-radius:10px">
            <div class="item item-avatar item-balanced" style="border-width: 0px; border-color: #FFAF17;border-radius:10px">
              <img src="img/head.png">
              <div class="row">
                <div class="col" style="position:relative;margin-top:-10px;margin-left:-15px">
                <h2>秘密之旅</h2>
                <p>春雨贵如湿哒哒 2015.11.02</p>
                </div>
                <img src="img/page_1.png" style="width:40px;height:10px">
              </div>
            </div>
            <ion-slide-box style="height: 200px;">
              <ion-slide>
                <div style="background-image:url(img/pic_1.png); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
              </ion-slide>
              <ion-slide>
                <div style="background-image:url(img/pic_2.jpg); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
              </ion-slide>
              <ion-slide>
                <div style="background-image:url(img/pic_3.jpg); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
              </ion-slide>
              <ion-slide>
                <div style="background-image:url(img/pic_4.jpg); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
              </ion-slide>
            </ion-slide-box>
            <div class="item item-body" style="padding: 0; border-width: 0;">
              <img class="full-image" src="img/delorean.jpg">
            </div>
            <div class="row" style="text-align: center;background-color:#383644">
              <div class="button-bar">
                <img src="img/icon_1.png" style="width:25px;height:25px;position:relative;top:8px;left:13px;">
                <a class="button button-clear">收藏 21</a>
                <img src="img/icon_2.png" style="width:25px;height:25px;position:relative;top:8px;left:14px;">
                <a class="button button-clear">评论 18</a>
                <img src="img/icon_3.png" style="width:25px;height:25px;position:relative;top:8px;left:17px;">
                <a class="button button-clear">赞 55</a>
              </div>
            </div>
          </div>
        </ion-list>
        <ion-list ng-show="selected(2)">
          <<a class="item item-dark item-avatar" ui-sref="app.home_other">
            <img src="img/head.png">
            作死的小乌龟<br/>
            粉丝 10086
            <img src="img/manicon.png" style="width:25px;height:25px;position:relative;top:8px;left:10px;">
          </a>
          <a class="item item-dark item-avatar" ui-sref="app.home_other">
            <img src="img/head.png">
            Mr.holiday<br/>
            粉丝 12
            <img src="img/manicon.png" style="width:25px;height:25px;position:relative;top:8px;left:10px;">
          </a>
          <a class="item item-dark item-avatar" ui-sref="app.home_other">
            <img src="img/head.png">
            Jying1994<br/>
            粉丝 99
            <img src="img/womanicon.png" style="width:25px;height:25px;position:relative;top:8px;left:10px;">
          </a>
          <a class="item item-dark item-avatar" ui-sref="app.home_other">
            <img src="img/head.png">
            PK<br/>
            粉丝 2395
            <img src="img/manicon.png" style="width:25px;height:25px;position:relative;top:8px;left:10px;">
          </a>
        </ion-list>
        <ion-list ng-hide="selected(2)">
          <div class="item-dark card route-list">
            <div class="item item-avatar item-balanced" style="border-width: 0px; border-color: #FFAF17;">
              <img src="img/head.png">
              <div class="row">
                <div class="col" style="position:relative;margin-top:-10px;margin-left:-15px">
                <h2>秘密之旅</h2>
                <p>春雨贵如湿哒哒 2015.11.02</p>
                </div>
                <img src="img/page_1.png" style="width:40px;height:10px">
              </div>
            </div>
            <ion-slide-box style="height: 200px;">
              <ion-slide>
                <div style="background-image:url(img/pic_1.png); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
              </ion-slide>
              <ion-slide>
                <div style="background-image:url(img/pic_2.jpg); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
              </ion-slide>
              <ion-slide>
                <div style="background-image:url(img/pic_3.jpg); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
              </ion-slide>
              <ion-slide>
                <div style="background-image:url(img/pic_4.jpg); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
              </ion-slide>
            </ion-slide-box>
            <div class="item item-body" style="padding: 0; border-width: 0;">
              <img class="full-image" src="img/delorean.jpg">
            </div>
            <div class="row" style="text-align: center;background-color:#383644">
              <div class="button-bar">
                <img src="img/icon_1.png" style="width:25px;height:25px;position:relative;top:8px;left:13px;">
                <a class="button button-clear">收藏 21</a>
                <img src="img/icon_2.png" style="width:25px;height:25px;position:relative;top:8px;left:14px;">
                <a class="button button-clear">评论 18</a>
                <img src="img/icon_3.png" style="width:25px;height:25px;position:relative;top:8px;left:17px;">
                <a class="button button-clear">赞 55</a>
              </div>
            </div>
          </div>
        </ion-list>
      </div>
    </div>

    <ion-list ng-show="searching() && !searched">
      <a class="item item-icon-left item-icon-right" ng-click="search_result()">
        <i class="icon ion-android-time"></i>
        {{query.value}}
        <i class="icon ion-ios-arrow-right"></i>
      </a>
      <a class="item item-icon-left item-icon-right" ng-click="search_result()">
        <i class="icon ion-android-time"></i>
        大运河
        <i class="icon ion-ios-arrow-right"></i>
      </a>
      <a class="item item-icon-left item-icon-right" ng-click="search_result()">
        <i class="icon ion-android-time"></i>
        上海徒步
        <i class="icon ion-ios-arrow-right"></i>
      </a>
      <a class="item item-icon-left item-icon-right" ng-click="search_result()">
        <i class="icon ion-android-time"></i>
        野生
        <i class="icon ion-ios-arrow-right"></i>
      </a>
      <a class="item" style="text-align: center;">
        <span style="border: 1px solid #FFAF17; color: #FFAF17;
        padding: 5px 10px; border-radius: 5px;">
          清空历史记录</span>
      </a>
    </ion-list>

    <div ng-hide="searching()">
      <ion-slide-box style="height: 150px;">
        <ion-slide>
          <div style="background-image:url(img/square_1.png); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
        </ion-slide>
        <ion-slide>
          <div style="background-image:url(img/square_2.png); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
        </ion-slide>
        <ion-slide>
          <div style="background-image:url(img/square_1.png); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
        </ion-slide>
        <ion-slide>
          <div style="background-image:url(img/square_2.png); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
        </ion-slide>
      </ion-slide-box>
      <ion-list>
        <ion-item class="item-divider item-dark" style="font-size: 14px;">
          热门用户
        </ion-item>
        <ion-item class="item-dark">
          <div class="row" style="text-align: center;">
            <div class="col" ng-repeat="user in popularUsers">
              <img src="{{user.headImage}}" class="popular-user-list">
              <br>
              <p style="font-size: 10px;color:white">{{user.name}}</p>
            </div>
          </div>
        </ion-item>
      </ion-list>

      <ion-list>
        <div class="item-dark card route-list" ng-repeat="route in popularRoutes">
          <div class="item item-avatar item-balanced" style="border-width: 0px; border-color: #FFAF17;">
            <img src="{{route.who.headImage}}">
            <div class="row">
              <div class="col" style="position:relative;margin-top:-10px;margin-left:-15px">
              <h2>{{route.title}}</h2>
              <p><span>{{route.who.name}}  </span><span>{{route.when}}</span></p>
              </div>
              <img src="img/page_1.png" style="width:40px;height:10px">
            </div>
          </div>
          <ion-slide-box style="height: 200px;">
            <ion-slide ng-repeat="pic in route.pics">
              <div style="background-image:url({{pic}}); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
            </ion-slide>
          </ion-slide-box>
          <div class="row" style="text-align: center;background-color:#383644">
            <div class="button-bar">
              <img src="img/icon_1.png" style="width:25px;height:25px;position:relative;top:8px;left:13px;">
              <a class="button button-clear">收藏 21</a>
              <img src="img/icon_2.png" style="width:25px;height:25px;position:relative;top:8px;left:14px;">
              <a class="button button-clear">评论 18</a>
              <img src="img/icon_3.png" style="width:25px;height:25px;position:relative;top:8px;left:17px;">
              <a class="button button-clear">赞 55</a>
            </div>
          </div>
        </div>
      </ion-list>
    </div>
  </ion-content>
</ion-view>
